<template>
    <div>
      <transition name="el-fade-in-linear">
        <div class="box" v-if="flag">
            <a href="javascript:;" @click="close" class="close">X</a>
            <h3>登录</h3>
            <hr>
            <label>手机号：</label>
            <el-input v-model="phone"></el-input>
            <label>密码：</label>
            <el-input type="password" show-password v-model="pass"></el-input>
           <div v-if="codeShow">
            <label style="display:block">验证码:</label>
            <el-input style="width:50%;float:left" v-model="code"></el-input>
            <img width="50%" style="padding:5px" height="40px" :src="'data:image/jpeg;base64,'+codeImg">
          </div>
            <p>
                <a>忘记密码</a>
                <span>|</span>
                <a href="/login">注册</a>
            </p>
            <p style="text-align:center">
                <el-button size="small" @click="login" type="warning">登录</el-button>
            </p>
        <span  style="position:absolute;bottom:10px;right:10px;font-size:10px;color:#a2a2a2">copyright © waterghost</span>
        </div>
      </transition>
    </div>
</template>

<script>
import qs from "qs"
export default {
    props:["flag"],
    data(){
        return{
            code:null,
            phone:null,
            pass:null,
            codeShow:false,
            codeImg:null
        }
    },
    methods:{
        close(){
            this.$emit("close")
        },
        login(){
            this.$http.post("/login",qs.stringify({phone:this.phone,key:this.pass,code:this.code})).then(va =>{
                this.$alert(va.data.message)
               if(va.data.code==200){
                   this.codeShow=false
                    sessionStorage.setItem("TOKEN",va.data.data)
                    // 获取用户的id
                    this.$http.get("/user/getUserId").then(va =>{
                        // 将自己id进行封存 两层 BASH64 加密
                      sessionStorage.setItem("BC",window.btoa(window.btoa(va.data))) 
                    })
                    // 切换后台
                    this.$emit("loginSeceess")
                }else if(va.data.code==2001){
                    this.$http.post("/code/verfcode",qs.stringify({phone:this.phone})).then(va =>{this.codeImg=va.data})
                    this.codeShow=true
                }
            })
        }
    },
}
</script>

<style scoped lang="less">
    .box{
        width: 400px;
        height: auto;
        background: #ffcd35;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        z-index: 60;
        margin-top: -200px;
        padding: 10px;
        border-radius: 5px;
        p{  
            font-size: 10px;
            line-height: 50px;
            text-align: center;
            a{
                margin-right: 10px;
                margin-left: 10px;
            }
        }
    }
    h3{
        text-align: center;
    }
    hr{
        margin-top: 10px;
        margin-bottom: 10px;

        border: 1px solid orange;
    }
    .close{
        font-size: 20px;
        font-family: ht;
        color: rgb(112, 112, 112);
        position: absolute;
        right: 10px;
        font-weight: bolder;
    }

      @media  screen and (max-width: 500px) {
          .box{
              width: 350px;
              margin-left: -180px !important;
            }
      }
</style>